<template>
    <div style="width: 350px;">
        <el-form ref="ruleFormRef" :model="userForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item>
                <el-button type="primary" @click="router.back">返回</el-button>
            </el-form-item>
            <el-form-item label="用户名" prop="userName">
                <el-input v-model="userForm.userName" />
            </el-form-item>
            <el-form-item label="密码" prop="userPwd">
                <el-input type="password" v-model="userForm.userPwd" show-password />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="userForm.gender" class="ml-4">
                    <el-radio :label="'男'" size="large">男</el-radio>
                    <el-radio :label="'女'" size="large">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="头像" prop="avatar">
                <el-upload class="avatar-uploader" action="http://localhost:8888/user/uploadAvatar" :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 178px; height: 178px;" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="电话" prop="telephone">
                <el-input v-model="userForm.telephone" />
            </el-form-item>
            <el-form-item label="邮箱" prop="mail">
                <el-input v-model="userForm.mail" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    修改
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
    
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { FormInstance, FormRules, ElMessage, ElNotification } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { useRoute } from 'vue-router'
import router from '@/router'
import api from '@/api';



const route = useRoute()



const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const userForm = ref({
    id: route.params.id,
    userName: route.params.userName,
    userPwd: route.params.userPwd,
    avatar: route.params.avatar,
    telephone: route.params.telephone,
    mail: route.params.mail,
    gender: route.params.gender
})



const rules = reactive<FormRules>({
    userName: [
        {
            required: true,
            message: '用户名不能为空',
            trigger: 'change',
        },
    ],
    userPwd: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'change',
        },
    ],
    gender: [
        {
            required: true,
            message: '性别不能为空',
            trigger: 'change',
        },
    ],
    realName: [
        {
            required: true,
            message: '真实姓名不能为空',
            trigger: 'change',
        },
    ],
})


const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            api.user.editUser(userForm.value)
                .then(response => {
                    // 在这里可以处理提交成功后的逻辑
                    ElNotification({
                        title: 'Success',
                        message: response.data.msg,
                        type: 'success',
                        duration: 1500
                    })
                })
                .catch(error => {
                    ElNotification({
                        title: 'Error',
                        message: error.data.msg,
                        type: 'error',
                        duration: 1500
                    })
                    // 在这里可以处理提交失败后的逻辑
                });
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const imageUrl = ref('')
// 如果已有头像，则将头像地址赋值给 imageUrl
if (Array.isArray(route.params.avatar) && route.params.avatar.length > 0) {
    imageUrl.value = route.params.avatar[0]
} else if (typeof route.params.avatar === 'string') {
    imageUrl.value = route.params.avatar
}
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    userForm.value.avatar = response.msg
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>